<script setup lang="ts">
import {ref} from "vue";
import BGPage from './components/BGPage.vue';
import Pane from "./components/Pane.vue";
import Tables from "./components/Tables.vue";
import ClassRomOnline from "./components/ClassRomOnline.vue";
import EchartDemo from "./components/EchartDemo.vue";
import EChartsStudy from "./components/EChartsStudy.vue";
let isShowGifBG =ref(true);
</script>

<template>
  <div class="main">
    <BGPage v-if="isShowGifBG">
      <div class="title">
      <span>爱仪监控大屏</span>  
      </div>
      <div class="context">
        <div class="row1">
       <EchartDemo style="width: 100%; height: 40vh;"></EchartDemo>
       <EChartsStudy style="width: 100%; height: 40vh;"></EChartsStudy>
        <Pane style="width: 100%; height: 40vh;"></Pane>
        </div>
        <div class="row2">
         <ClassRomOnline style="width: 67vw; height: 50vh;"/>
          <Tables style="width: 33vw; height: 50vh;"/>
        </div>
      </div>
    </BGPage>
  </div>
</template>

<style scoped>
.row1{
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
}
.row2{
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
}
.main{
  width: 100vw;
  height: 100vh;
}
.title{
  background-image: url(../images/title_bg.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  height: 10%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.title>span{
  font-size: 2.5vw;
  color: white;
}
</style>
